
import React, { useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

function List() {
  const [listData, setListData] = useState([
    { id: '1', content: '拖拽条目1' },
    { id: '2', content: '拖拽条目2' },
    { id: '3', content: '拖拽条目3' },
    { id: '4', content: '拖拽条目4' },
    { id: '5', content: '拖拽条目5' },
  ]);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const newList = Array.from(listData);
    const [removed] = newList.splice(result.source.index, 1);
    newList.splice(result.destination.index, 0, removed);

    setListData(newList);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list">
        {(provided, snapshot) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {listData.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default List;
